<template>
  <section>
    <el-row>
      <el-col :span="12">
        <el-row class="images">
          <el-row class="imgBox" v-if="adPosition.ad.length > 0" @click.native="checkCurrItem(adPosition.ad[0])">
            <i class="el-icon-error" @click.stop="delItem(adPosition.ad[0])"/>
            <i class="el-icon-picture" v-if="adPosition.ad[0].img === ''"/>
            <img v-else :src="adPosition.ad[0].img" style="width: 95%"/>
          </el-row>
          <el-row class="imgBox" v-else>
            <i class="el-icon-plus"  @click="addBtn"></i>
          </el-row>
        </el-row>
      </el-col>
      <el-col :span="12" v-if="currItem && adPosition.ad.length > 0">
        <el-button size="mini" type="text" @click="editAdBtn" >编辑</el-button>
      </el-col>
    </el-row>
  </section>
</template>

<script>
  import setDetail from './setDetail'
  import uploadImg from  '@/common/uploadImg'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "imageAd",
    props:['adPosition'],
    components:{setDetail,uploadImg},
    data(){
      return {
        currItem:null
      }
    },
    watch:{
      adPosition(nv,ov){
        console.log('能监控么？？？')
      }
    },
    created(){
      console.log('adPosition——————————————————',this.adPosition)
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      addBtn(){
        console.log('没反应？？？')
        this.$emit('newAd')
      },
      delItem(item){
        this.$emit('delAd',item)
      },
      editAdBtn(){
        this.$emit('editAd',this.currItem)
      },
      checkCurrItem(item){
        console.log('确定',item)
        this.currItem=item
      },
    }
  }
</script>

<style scoped>
  .el-icon-error{
    display: none;
    border: 0px solid red;
    position: absolute;
    right: 0px;
    top:5px;
    color:red;
    font-size: small;
  }
  .imgBox{
    /*border: 1px solid red;*/
    border: 2px solid #bbb;
    font-size: 100px;
    text-align: center;
    color: #bbb;
    width: 300px;
    min-height: 150px;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .imgBox:hover .el-icon-error{
    display: block;
  }
</style>
